<template>
  <section id="sidebar">
    <div id="sidebar-container">
      <a class="router btn btn-secondary" href="#/home" :class="{on: sidebar.home}">
        <i class="icon-home"></i>
        <span>Home</span>
      </a>
      <a class="router btn btn-secondary" href="#/watches" :class="{on: sidebar.watches}">
        <i class="icon-emotsmile"></i>
        <span>Watches</span>
      </a>
  
      <section class="watches">
        <div class="btn-group">
          <input type="text" class="form-control" value="All">
          <button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>
        <ul class="list" id="watches-list-container">
          <li class="item">
            <i class="icon-user"></i>
            <span>shindousaigo</span>
          </li>
          <li class="item">
            <i class="icon-user"></i>
            <span>shindousaigo</span>
          </li>
          <li class="item">
            <i class="icon-user"></i>
            <span>shindousaigo</span>
          </li>
          <li class="item">
            <i class="icon-user"></i>
            <span>shindousaigo</span>
          </li>
          <li class="item">
            <i class="icon-user"></i>
            <span>shindousaigo</span>
          </li>
          <li class="item">
            <i class="icon-user"></i>
            <span>shindousaigo</span>
          </li>
          <li class="item">
            <i class="icon-user"></i>
            <span>shindousaigo</span>
          </li>
        </ul>
        <div class="narrow">
          <button class="btn btn-secondary">
            <span>Add Watch</span>
          </button>
          <button class="btn btn-secondary">
            <span>Watch List</span>
          </button>
          <button class="btn btn-secondary">
            <span>Expire Watch</span>
          </button>
        </div>
      </section>
      <button class="btn btn-secondary">
        <i class="icon-question"></i>
        <span>Alarms</span>
      </button>
      <button class="btn btn-secondary">
        <i class="icon-doc"></i>
        <span>Reports</span>
      </button>
      <button class="btn btn-secondary">
        <i class="icon-settings"></i>
        <span>Settings</span>
      </button>
      <button class="btn btn-secondary">
        <i class="icon-cursor"></i>
        <span>About</span>
      </button>
      <button class="btn btn-secondary">
        <i class="icon-logout"></i>
        <span>Log Out</span>
      </button>
      <br> COMPONENTS
      <a class="router btn btn-secondary" href="#/login" :class="{on: sidebar.login}">
        <i class="icon-logout"></i>
        <span>Login page</span>
      </a>
      <br>
      <br>
    </div>
  </section>
</template>
<script>

import { mapGetters } from 'vuex'
export default {
  name: 'sidebar',
  computed: {
    ...mapGetters([
      'sidebar'
    ])
  },
  mounted: function () {
    let watchesListContainer = document.getElementById('watches-list-container')
    Ps.initialize(watchesListContainer)
    let sidebar = document.getElementById('sidebar')
    Ps.initialize(sidebar)
  }
}
</script>
